*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
}
body,html{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
}
img{
  max-width: 100%;
}
header{
  height:8rem;
  width:100%;
  background: #F5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  div{
    width: 33.3%;
    text-align: center;
  }
  form{
    width:90%;
    //border: 1px solid #ddd;
    background: #ffffff;
    margin-left: 5%;
    border-radius: 10px;
    input{
      outline: none;
      border: none;
      margin-left: 1rem;
      padding: 0.5rem;

    }

  }

}
section{
  flex-flow: 1;
  overflow: auto;
}
.banner{
  width:100%;
  img{
    width:100%;
  }
}
nav{
  margin: 0.5rem 0;
  width:100%;
 ul{
   width:100%;
   display: flex;
   justify-content:space-around;
   flex-wrap: wrap;
   li{
     width:23%;
     text-align: center;
     margin: 0.5rem 0;
     img{
       width:60%;
     }
   }
 }
}
.tm{
  width: 100%;
  padding-left: 1rem;
  .title{
    width: 100%;
    padding-left: 1rem;
    border-left: 2px solid orangered;
    span{
      padding-left: 1rem;
      font-size: 0.6rem;
    }
  }
  ul{
    width:100%;
    display: flex;
    justify-content: space-around;
    li{
      text-align: left;
      p{
        font-size:1rem;
        padding:0.5rem 0;
        font-weight: 800;
      }
      span{
        font-size: 0.6rem;
      }
    }
    li:nth-of-type(1){
      p{
        color: #FF0000;
      }

    }
    li:nth-of-type(2){
      p{
        color: green;
      }

    }
    li:nth-of-type(3){
      p{
        color: orangered;
      }

     }
    li:nth-of-type(4){
      p{
        color: blue;
      }

    }
  }
}
.list-img{
  width:100%;
  margin: 0.5rem 0;
  ul{
    width:100%;
    display: flex;
    justify-content:space-around;
  }
}
.list-text{
  width:100%;
  .titl{
    font-size: 1.2rem;
    text-align: center;
    font-weight: 900;
  }
  ol{
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li{

      text-align: center;
      padding: 0.5rem 0;
      p{
       font-weight: 800;
        padding: 0.5rem 0;
      }
    }
  }
  ul{
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li{
      width:30%;
    }
  }
}
footer{
  height: 7rem;
  align-items: center;

  width:100%;
  display: flex;
  justify-content:space-around;
  a{
    display: inline-block;
    text-align: center;
    img{
      width: 60%;
    }
  }
}
